<template>
  <div class="box-border w-full h-full bg-slate-50 p-3">
    <div class="bg-white min-h-full box-border overflow-hidden p-3">
      <div ref="container" class="w-full h-full min-h-[300px]">
        <canvas
          ref="canvas"
          class="block bg-[rgb(91,128,170)]"
          :width="size.width"
          :height="size.height"
        ></canvas>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
const container = ref();
let canvas = ref();
const pos = ref({
  x: 200,
  y: 100,
});
const size = ref({
  width: 900,
  height: 400,
});

let cxt: any = null;
onMounted(() => {
  cxt = canvas.value.getContext("2d");
  const axisColor = "#FFFFFF";

  cxt.strokeStyle = axisColor;
  cxt.moveTo(0, pos.value.y);
  cxt.lineTo(size.value.width, pos.value.y);

  cxt.moveTo(pos.value.x, 0);
  cxt.lineTo(pos.value.x, size.value.height);
  cxt.stroke();

  refreshCanvasSize();
  cxt.fillStyle = "#FF0000";
  cxt.fillRect(0, 0, 100, 100);
});

const refreshCanvasSize = () => {
  size.value.width = container.value.offsetWidth;
  size.value.height = container.value.offsetHeight;
  console.log(size.value.width, container.value.offsetWidth);
};
</script>